import 'dart:ffi';
import 'package:flutter/material.dart';
import '05_Child_Page.dart';

const Color pageBg = Color(0xff0A1E21);
const Color widgetColor = Color(0xff1D1E33);
const Color deepBg = Color(0xff111238);

class Example_05 extends StatefulWidget {
  const Example_05({super.key});

  @override
  State<Example_05> createState() => _Example_05State();
}

class _Example_05State extends State<Example_05> {

  bool userSex = false;
  double _currentSliderValue = 50;
  int weight = 60;
  int age = 1;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('BIM CALCULATOR'),
        backgroundColor: pageBg,
      ),
      body: Container(
        color: pageBg,
        child: Column(
          children: [
            Expanded(
              child: Row(
                children: [
                  Expanded(
                    flex: 1,
                    child: GestureDetector(
                      onTap: () {
                        print('male was click!');
                        setState(() {
                          userSex = !userSex;
                        });
                      },
                      child: ReusableCard(
                        colour: !userSex? widgetColor : Color(0xff111238),
                        childWidget: SexLayout(
                          iconObj: Icons.male,
                          colour: Colors.blue,
                          texts: 'male'
                        )
                      )
                    )
                  ),
                  Expanded(
                    flex: 1,
                    child: GestureDetector(
                      onTap: () {
                        print('female was click!');
                        setState(() {
                          userSex = !userSex;
                        });
                      },
                      child: ReusableCard(
                        colour: !userSex? Color(0xff111238): widgetColor,
                        childWidget: SexLayout(
                          iconObj: Icons.female,
                          colour: Colors.pink,
                          texts: 'female'
                        )
                      )
                    )
                  )
                ],
              ),
            ),
            Expanded(
              child: ReusableCard(
                colour: widgetColor,
                childWidget: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text(
                      'Height', 
                      style: TextStyle(
                        color: Colors.grey,
                        fontSize: 28.0,
                        fontWeight: FontWeight.w500
                      )
                    ),
                    SizedBox(height: 10.0),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.baseline,
                      textBaseline: TextBaseline.alphabetic,
                      children: [
                        Text(
                          _currentSliderValue.round().toString(), 
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 36.0,
                            fontWeight: FontWeight.w700
                          )
                        ),
                        Text(
                          'cm',
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 14.0
                          )
                        )
                      ],
                    ),
                    SliderTheme(
                      data: SliderTheme.of(context).copyWith(
                        thumbShape: RoundSliderThumbShape(enabledThumbRadius: 15.0),
                        overlayShape: RoundSliderOverlayShape(overlayRadius: 30.0),        
                        // 拇指颜色( 滑动球的颜色 )
                        thumbColor: Colors.pink[300],
                        // 覆盖物颜色
                        overlayColor: Colors.pink[100],
                      ), 
                      child: Slider(
                        max: 230,
                        divisions: 230,
                        value: _currentSliderValue,
                        // 活跃部分滑动条的颜色
                        activeColor: Colors.pink[300],
                        // 滑动条静态颜色
                        inactiveColor: Colors.white,
                        // 滑动条蚊子
                        label: _currentSliderValue.round().toString(),
                        onChanged: (double value) {
                          if(value <= 50) {
                            setState(() {
                              _currentSliderValue = 50;
                            });
                            return;
                          }
                          setState(() {
                            _currentSliderValue = value;
                          });
                        },
                      )
                    )
                  ],
                ),
              )
            ),
            Expanded(
              child: Row(
                children: [
                  Expanded(
                    flex: 1,
                    child: ReusableCard(
                      colour: widgetColor,
                      childWidget: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Text(
                            'Weight', 
                            style: TextStyle(
                              fontWeight: FontWeight.w400,
                              color: Colors.grey,
                              fontSize: 22.0
                            )
                          ),
                          Text(
                            weight.toString(),
                            style: TextStyle(
                              fontWeight: FontWeight.w600,
                              color: Colors.white,
                              fontSize: 32.0
                            )
                          ),
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceAround,
                            children: [
                              RoundIconButton(
                                childWidget: Icon(
                                  Icons.add,
                                  color: Colors.white
                                ),
                                btnPress: () {
                                  setState(() {
                                    weight++;
                                  });
                                }
                              ),
                              RoundIconButton(
                                childWidget: Icon(
                                  Icons.remove,
                                  color: Colors.white
                                ),
                                btnPress: () {
                                  setState(() {
                                    weight--;
                                  });
                                }
                              )
                            ],
                          )
                        ],
                      ),
                    ),
                  ),
                  Expanded(
                      flex: 1,
                      child: ReusableCard(
                        colour: widgetColor,
                        childWidget: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Text(
                              'age', 
                              style: TextStyle(
                                fontWeight: FontWeight.w400,
                                color: Colors.grey,
                                fontSize: 22.0
                              )
                            ),
                            Text(
                              age.toString(),
                              style: TextStyle(
                                fontWeight: FontWeight.w600,
                                color: Colors.white,
                                fontSize: 32.0
                              )
                            ),
                            Row(
                              mainAxisAlignment: MainAxisAlignment.spaceAround,
                              children: [
                                RoundIconButton(
                                  childWidget: Icon(
                                    Icons.add,
                                    color: Colors.white
                                  ),
                                  btnPress: () {
                                    setState(() {
                                      age++;
                                    });
                                  }
                                ),
                                RoundIconButton(
                                  childWidget: Icon(
                                    Icons.remove,
                                    color: Colors.white
                                  ),
                                  btnPress: () {
                                    setState(() {
                                      age--;
                                    });
                                  }
                                )
                              ],
                            )
                          ],
                        ),
                      )
                  )
                ],
              )
            ),
            Container(
              width: double.infinity,
              height: 80.0,
              color: Colors.pink[300],
              child: Center(
                child: GestureDetector(
                  onTap: () {
                    Navigator.push(
                      context, 
                      MaterialPageRoute(builder: (cnotext) => ChildView05())
                    );
                  },
                  child: Text(
                    'BIM CALCULATOR',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 18.0,
                      fontWeight: FontWeight.w600
                    ),
                  )
                )
              )
            )
          ]
        )
      )
    );
  }
}

class ReusableCard extends StatelessWidget {
  ReusableCard({this.colour, @required this.childWidget});

  Color? colour;
  Widget? childWidget;

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 170.0,
      margin: EdgeInsets.all(15.0),
      decoration: BoxDecoration(
        color: colour,
        borderRadius: BorderRadius.circular(10.0)
      ),
      child: childWidget
    );
  }
}

class SexLayout extends StatelessWidget {
  SexLayout({this.iconObj, this.colour, this.texts});

  final IconData? iconObj;
  final Color? colour;
  final String? texts;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Icon(
          color: colour,
          iconObj,
          size: 60.0
        ),
        Text(
          texts!, 
          style: TextStyle(
            color: Colors.grey,
            fontSize: 22.0
          )
        )
      ],
    );
  }
}

class RoundIconButton extends StatelessWidget {

  RoundIconButton({this.childWidget, this.btnPress});
  final Widget? childWidget;
  // 这么写是为了传递匿名函数
  final void Function()? btnPress;

  @override
  Widget build(BuildContext context) {
    return RawMaterialButton(
      child: childWidget,
      onPressed: btnPress,
      elevation: 0.0,
      constraints: BoxConstraints.tightFor(
        width: 45.0,
        height: 45.0,
      ),
      shape: CircleBorder(),
      fillColor: Color(0xff4C4F5E),
    );
  }
}